<template>
  <header>
    <div class="box">
      <h1 class="box_logon">
        <img src="./logo.png" alt="" />
      </h1>
      <div class="boxone">
        <ul>
          <router-link to="/"><li style="color:rgb(71, 151, 255); font-size:20px; font-weight:600;">首页</li></router-link>
          <router-link to="/course"><li>课程</li></router-link>
          <router-link to="shopping"><li>购物车</li></router-link>
        </ul>
      </div>
      <div class="boxtow">
        <div class="boxtow_int">
          <input type="text" placeholder="请输入搜索课程" />
          <el-icon><Search /></el-icon>
        </div>
        <div class="box_login">
          <router-link to="/login" v-if="!sum">登录/注册</router-link>
          <div class="boxcen" v-else>
              <img src="https://www.xuexiluxian.cn/resources/images/avatar.png" alt="" style="width:100%;height:100%">
              
              <div class="boxcen_tow">
                <div class="boxcentow-tow">
                  <div class="boxcentow-tow-im">
                     <img src="https://www.xuexiluxian.cn/resources/images/avatar.png" alt="" style="width:100%;height:100%">
                  </div>
                  <div class="boxcentow-tow-zi">
                    <ul>
                      <li>Lvriozong</li>
                    </ul>
                  </div>
                </div>
                <ul>
                  <li>我的订单</li>
                </ul>
                <div class="boxcentow-one">
                  <li @click="exit">退出登入</li>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import {Search} from '@element-plus/icons-vue'
import { ref,onBeforeMount, reactive } from 'vue';
import { useStore } from 'vuex' // 引入useStore 方法

export default {
  name: "HelloWorld",
  components:{
    Search
  },
  props: {
    msg: String,
  },
  setup(){
    let sum = ref([]);
    const store = useStore()  // 该方法用于返回store 实例

    let name = reactive("")

    onBeforeMount(()=>{
      sum.value = localStorage.getItem('msg');
      // console.log(define)

      store.commit('increment',sum)
      name = store.state.name
      console.log(name)
    })

    var exit = () => {
      localStorage.clear()
      sum.value = ""
      store.commit('increment',sum)
      name = store.state.name
      console.log(name)
    }

    return{
      sum,
      store,
      name,
      exit
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped="css">
li{
  list-style-type:none;
  cursor: pointer;
}
.boxcen{
  width: 50px;
  height: 50px;
  border-radius: 50px;
  margin-top: 10px;
  position: relative;
}

.boxcen:hover .boxcen_tow{
  display: inline;
}

.boxcen_tow{
  width: 300px;
  border: solid 1px rgb(217, 217, 217);
  background: #ffffff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  display: none;
  overflow: hidden;
  box-shadow: 0px 5px 8px rgb(194, 192, 192);
  position: absolute;
  left: -122px;
  top: 65px;
  z-index: 1000;
}

.boxcentow-tow{ 
  width: 100%;
  height: 100px;
  display: flex;
  border-bottom: solid 1px rgb(221, 217, 218);
  align-content: center;
  justify-content: center;
  align-items: center;
}

.boxcen_tow > ul{
  width: 100%;
  height: 65px;
  text-align: center;
  display: flex;
}

.boxcen_tow > ul > li{
  color: black;
  width: 160px;
  height: 42px;
}

.boxcen_tow > ul > li:hover{
  color: rgb(56, 143, 255);
}

.boxcentow-one{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  border-top: solid 1px rgb(220, 219, 219);
}

.boxcentow-one li{
  color: rgb(147, 153, 159);
  line-height: 50px;
}

.boxcentow-tow-im{
  width: 60px;
  height: 60px;
}

.boxcentow-tow-zi{
  width: 200px;
  height: 60px;
  padding-left: 10px;
  line-height: 60px;
  box-sizing: border-box;
}

.boxcentow-tow-zi ul{
  width: 100%;
  height: 100%;
}

.boxcentow-tow-zi ul li{
  width: 100%;
  height: 50%;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.341);
}

.box_login > a{
  color: rgba(52, 51, 51, 0.915);
  font-weight: 400;
  font-size: 18px;
}

.box_login > a:hover{
  color: rgb(24, 126, 227);
}

.box {
  display: flex;
  justify-content: space-around;
  width: 1200px;
}

.box_logon {
  width: 160px;
  height: 55px;
  margin: 10px 0;
  cursor: pointer;
}

.boxone{
  width: 480px;
  height: 100%;
  float: left;
  display: flex;
  margin-left: 30px;
}

.boxone ul{
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 75px;
}

.boxone ul li{
  font-size: 18px;
  color: rgb(159, 159, 159);
  line-height: 74px;
}

.boxtow{
  display: flex;
}

.boxtow_int{
  width: 200px;
  height: 50px;
  line-height: 50px;
  margin: 10px 30px;
  background: rgba(240, 242, 244);
  /* float: left; */
  border-radius: 20px;
}

.boxtow_int input{
  height: 91%;
  border: solid 0px;
  outline: none;
  padding-left: 10px;
  background: rgba(240, 242, 244);
  border-radius: 20px;
  box-sizing: border-box;
}

.box_login{
  float: right;
  height: 75px;
  cursor: pointer;
  line-height: 75px;
}
</style>
